<%@page import="itsm.isperp.framework.core.context.ContextHolder"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ page contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = ContextHolder.getWebServerName(request);
%>

<!doctype html>
<html>
<head>
<title>重要事件</title>
<base href="<%=basePath%>">
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="author" content="ISPERP">
<meta name="Copyright" content="ISPERP" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<link rel="shortcut icon" href="favicon.ico" />

<link rel="stylesheet" href="js/libs/bootstrap/css/bootstrap.min.css">

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript"
	src="js/libs/bootstrap/js/bootstrap.min.js?t=5"></script>
<script src="js/libs/echarts3/echarts.min.js"></script>
<script src="js/libs/echarts3/dark.js"></script>

<style type="text/css">
* {
	color: #fff;
	font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial,
		sans-serif;
}

html {
	overflow: hidden;
}

body {
	font-size: 20px
}

#table1 {
	width: 99%
}

h4 {
	font-family: "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial,
		sans-serif;
	font-size: 24px;
	padding: 10px 0px 5px 15px;
	background: #c00000;
	color: #fff;
	width: 180px;
	margin-top: 0;
	margin-bottom: 0
}

h4 label {
	border-bottom: 1px solid #fff;
	padding-bottom: 4px;
}

th {
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	padding: 10px 3px
}

td {
	padding: 2px 3px;
	font-size: 16px
}

#table1 {
	width: 95%
}

#table2 td {
	font-size: 22px;
	border-top: 8px solid #000;
	border-right: 8px solid #000;
	background: #333;
	padding: 10px
}

#table2 .tb2_td1 {
	text-align: center;
	width: 150px
}

#table2 .tb2_td2 {
	width: 550px
}

.c_row1 {
	background: #888;
	text-align: center;
	width: 110px;
	float: left;
	margin-left: 3px
}

.c_row2 {
	margin-top: 2px
}

.c_row11 {
	font-size: 40px;
}

.c_row12 {
	background: #666;
}

.c_row_important {
	color: yellow;
}

#distanceDay, #distanceHour, #distanceMin, #distanceSec {
	font-size: 35px;
	color: yellow;
	font-weight: 700
}

#timebar {
	z-index: 1;
	position: absolute;
	top: 175px;
	height: 38px;
	background: #fff
}

.timelabel {
	color: #000;
	position: absolute;
	top: 1px;
	padding: 0 10px;
	font-weight: 500;
	font-size: 16px;
	margin: 1px 0 0 3px;
}

.timeCurrent {
	color: #fff;
	background: #c00000;
	border-radius: 5px
}

#timepointline {
	z-index: 1;
	height: 10px;
	width: 40px;
	position: absolute;
	left: 20px;
	background: #c00000;
	border-radius: 5px;
	top: 26px
}

#timepointlineb {
	z-index: 0;
	height: 10px;
	width: 95%;
	position: absolute;
	left: 40px;
	background: #000;
	border-radius: 5px;
	top: 26px
}

#timeline {
	width: 100%;
	height: 395px;
	position: relative;
}

.timepoint {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 5px;
	font-size: 16px;
	background: #fff;
}

.timechat {
	width: 200px;
	height: 130px;
	background: #333;
	border-radius: 10px;
	position: absolute;
	padding: 10px;
}

.timechat0 {
	top: 13px
}

.timechat1 {
	bottom: 18px
}

.handArrow0 {
	z-index: 0;
	position: absolute;
	top: 130px;
	left: 30px;
	width: 0;
	height: 0;
	font-size: 0;
	border-right: solid 24px;
	border-left: solid 24px;
	border-top: solid 24px;
	border-color: #333 #000 #333 #000;
}

.handArrow1 {
	z-index: 0;
	position: absolute;
	top: -25px;
	left: 30px;
	width: 0;
	height: 0;
	font-size: 0;
	border-right: solid 27px;
	border-left: solid 27px;
	border-bottom: solid 27px;
	border-color: #333 #000 #333 #000;
}

.oc {
	padding: 10px;
	position: relative
}

.ocuser {
	padding: 5px;
	background-color: #999;
	color: #000;
	width: 80px;
	text-align: center
}

.occontents {
	position: absolute;
	left: 96px;
	top: 10px;
}

.oclabel {
	background: #666;
	padding: 5px;
	border-radius: 5px;
	max-width: 780px
}

.oclabel, .octime {
	float: left;
	padding: 5px
}

.octime {
	color: #666
}

#taskList li {
	padding: 5px 3px;
	margin: 15px 0;
	margin: 15px 0;
}
</style>
</head>
<body style="background-color:#000">
	<div
		style="text-align: left ;color:#fff;font-weight:700;margin:10px 0 10px 40px;font-size: 40px">
		重要事件报告：${model.title}【${model.code}】</div>
	<div style="padding:6px 6px 0 6px">
		<div class="row" style=";min-height:135px">
			<div class="col-sm-7 " style="padding-right: 0;padding-left:40px">
				<div>
					<h4>
						<label>事件概述</label>
					</h4>
					<div
						style="font-size:22px;padding:10px 5px;background:#333;height:120px;overflow: hidden"
						id="description">${model.description}</div>
				</div>
			</div>
			<div class="col-sm-5 " style="padding-right: 0;padding-left:40px;">
				<div>
					<h4 style="padding-top:20px;padding-bottom:20px">
						<label>距离事件发生</label>
					</h4>
					<div
						style="color:yellow;background:#333;padding: 13px 10px;width:520px;position:absolute;left: 220px; top: 0;">
						&nbsp;<span id="distanceDay"></span>&nbsp;天&nbsp;<span
							id="distanceHour"></span>&nbsp;时&nbsp;<span id="distanceMin"></span>&nbsp;分&nbsp;<span
							id="distanceSec"></span>&nbsp;秒
					</div>
				</div>
				<div style="position:relative;margin-top:20px">

					<h4 style="padding-top:14px">
						<label>事件发生时间</label>
					</h4>
					<div
						style="background:#333;padding: 12px 10px;width:520px;position:absolute;left: 180px; top: 0;font-size:22px;font-weight:700">
						<span><fmt:formatDate value="${model.happenTime}"
								pattern="MM月dd日HH时mm分" /> </span>
					</div>
				</div>

			</div>
		</div>
		<div class="row" style="margin-top:15px">
			<div class="col-sm-7 " id="timePanel"
				style="padding-right: 0;padding-left:40px;overflow: hidden">
				<h4>
					<label>最新状况</label>
				</h4>

				<div id="timeline">

					<div id="timebar">

						<div id="timelabel"></div>

						<div id="timepointline"></div>

						<div id="timepointlineb"></div>
					</div>
					<div id="timechat"></div>
				</div>
			</div>
			<div class="col-sm-5" style="padding-right: 0;padding-left:40px">
				<h4>
					<label>对应体制</label>
				</h4>
				<table id="table2">
					<tr>
						<td class="tb2_td1">总括</td>
						<td class="tb2_td2" id="tdMain">${model.confirmtimemanName}</td>
					</tr>
					<tr>
						<td class="tb2_td1">IS部</td>
						<td class="tb2_td2" id="tdIs"></td>
					</tr>
					<tr>
						<td class="tb2_td1">IT供应商</td>
						<td class="tb2_td2"><div id="tdIt"
								style="height:200px;overflow: hidden; "></div></td>
					</tr>
				</table>
			</div>
		</div>

		<div class="row" style="margin-top: 20px">
			<div class="col-sm-7 " style="padding-right: 0;padding-left:40px">
				<h4>
					<label>现场直播</label>
				</h4>
				<div id="onlinechat"
					style="height:340px;width:99%;background-color:#333;overflow:hidden;margin-bottom:15px">
				</div>

			</div>

			<div class="col-sm-5 " style="padding-right: 0;padding-left:40px">
				<h4>
					<label>工作跟进</label>
				</h4>

				<div id="personTask"
					style="height:340px;width:690px;background-color:#333;overflow:hidden;padding:10px;margin-bottom:15px">
				</div>
			</div>
		</div>
	</div>

	<script type="text/javascript">
		var template_tb2 = "<tr><td class='tb2_td1'>{deptName}</td><td class='tb2_td2'>{users}</td></tr>";

		var happenTime = "${model.happenTime}".substring(0, 19);
		var date1 = new Date(happenTime.replace(/-/g, "/"));

		function updateDistanceTime() {
			var date2 = new Date();
			var date3 = date2.getTime() - date1.getTime();
			var days = Math.floor(date3 / (24 * 3600 * 1000))
			var leave1 = date3 % (24 * 3600 * 1000);
			var hours = Math.floor(leave1 / (3600 * 1000));
			var leave2 = leave1 % (3600 * 1000);
			var minutes = Math.floor(leave2 / (60 * 1000));
			var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
			var seconds = Math.round(leave3 / 1000);

			$("#distanceDay").text(days);
			$("#distanceHour").text(hours);
			$("#distanceMin").text(minutes);
			$("#distanceSec").text(seconds);
		}

		updateDistanceTime();

		function reflshMember() {
			$.ajax({
				url : "screen/screen/incidentMajorMember?id=${model.id}",
				dataType : "json",
				success : function(data) {

					var isMember = "", its = "";

					$(data).each(function(index, item) {
						if (item.department_treenode_name_path) {
							if (item.department_treenode_name_path.indexOf("信息系统部") > 0) {
								if (item.fullname != "${model.confirmtimemanName}")
									isMember += item.fullname + "    &nbsp;&nbsp;";
							} else {
								var dept = item.department_treenode_name_path;
								if (dept.indexOf("D-IT") > 0) {
									dept = dept.split('/')[3];
									var deptArr = dept.split('-');
									dept = deptArr[deptArr.length - 1];
									
									if(dept.indexOf("-")>0){
										
										dept=dept.substr(7)
										
									}
									
									
								} else {
									dept = dept.split('/');
									dept = dept[dept.length - 2];
								}
								its += "(" + dept + ")" + item.fullname + "    &nbsp;&nbsp;";
							}
						}
					});

					$("#tdIs").html(isMember);
					$("#tdIt").html(its);

				}
			});
		}
		reflshMember();

		var handleTemplate = '<div  class="timechat timechat{timechat}" style="left:{left}px"><p>{content}</p><div class="handArrow{handArrow}"></div></div>';
		var handleTimeLabelTemplate = '<div class="timelabel " style="{style}">{timelabel}</div>';
		var handleTimePointTemplate = '<div  class="timepoint"  style="left:{left}px"></div>';

		function reflshHandle() {
			$.ajax({
				url : "screen/screen/incidentMajorHandle?id=${model.id}",
				dataType : "json",
				success : function(data) {

					var timelabel = "", timepoint = "", timechat = "";

					for (var i = 0; i < data.length; i++) {

						var handleTimeLabel = handleTimeLabelTemplate.replace("{timelabel}", data[i].handleTime.substring(11));
						if ((i + 1) == data.length) {
							handleTimeLabel = handleTimeLabel.replace("{style}", "left:" + ((i) * 115 + 20) + "px;color: #fff;background: #c00000;border-radius: 5px");
						} else {
							handleTimeLabel = handleTimeLabel.replace("{style}", "left:" + ((i) * 115 + 20) + "px");
						}

						timelabel += handleTimeLabel;

						timepoint += handleTimePointTemplate.replace("{left}", (i) * 115 + 30);

						timechat += handleTemplate.replace("{content}", data[i].contents).replace("{left}", (i) * 115).replace("{timechat}", (i % 2)).replace("{handArrow}", (i % 2));
					}
					$("#time" + (data.length)).addClass("timeCurrent");

					var timeWidth = 40 + (data.length - 1) * 120;
					var panelWidth = $("#timePanel").width();
					$("#timepointline").width(timeWidth + "px");
					if (timeWidth < panelWidth) {
						$("#timebar,#timeline").width("100%");
					} else {

						$("#timebar,#timeline").width(timeWidth + 30 + "px");

					}
					$("#timelabel").html(timelabel);
					$("#timepointline").html(timepoint);
					$("#timechat").html(timechat);

					$("#timeline").css("margin-left", "0");
					if (timeWidth > panelWidth) {
						$("#timeline").stop().animate({
							"margin-left" : "-" + (timeWidth - panelWidth + 120) + "px"
						}, 5000, "linear", function() {
						});
					}

				}
			});
		}

		var template_oc = '<div class="oc"><div class="ocuser">{ocuser}</div><div class="occontents"><div class="oclabel">{oclabel}</div><div class="octime">{octime}</div></div></div>';

		function reflshChat() {
			$.ajax({
				url : "screen/screen/incidentMajorChats?id=${model.id}",
				dataType : "json",
				success : function(data) {
					var str = "";
					for (var i = 0; i < data.length; i++) {
						str += template_oc.replace("{ocuser}", data[i].senderName).replace("{oclabel}", data[i].contents).replace("{octime}", data[i].sendTime.substring(5));
					}
					$("#onlinechat").append(str);
				}
			});
		}

		function reflshTask() {
			$.ajax({
				url : "task/task/person/listByIncident?incidentId=${model.id}",
				dataType : "json",
				success : function(data) {
					var str = "<ul id='taskList'>";
					for (var i = 0; i < data.content.length; i++) {
						var d = data.content[i];
						str += "<li>" + d.remark + "&nbsp;" + d.name + "(" + d.status + ")</li>";
					}
					$("#personTask").append(str + "</ul>");
				}
			});
		}

		reflshHandle();
		reflshChat();
		reflshTask();

		setInterval(updateDistanceTime, 30000);

		setInterval(reflshChat, 30000);
		setInterval(reflshTask, 30000);
		setInterval(reflshHandle, 30000);

		var times = 0;
		function startmarquee(ele, lh, speed, delay) {
			var t;
			var oHeight = 550; /**/

			var p = false;
			var o = document.getElementById(ele);
			var preTop = 0;
			o.scrollTop = 0;
			function start() {
				t = setInterval(scrolling, speed);
				o.scrollTop += 1;
			}
			function scrolling() {

				if (o.scrollTop % lh != 0 && o.scrollTop % (o.scrollHeight - oHeight - 1) != 0) {
					preTop = o.scrollTop;
					o.scrollTop += 1;
					if (preTop >= o.scrollHeight || preTop == o.scrollTop) {

						o.scrollTop = 0;
					}
				} else {

					times += 1;
					if (times > 40) {
						times = 0;
						// createList();
						//  createchart();
					}
					clearInterval(t);
					setTimeout(start, delay);
				}
			}
			setTimeout(start, delay);
		}
		$(function() {
			startmarquee("tdIt", 50, 20, 1500);
			startmarquee("onlinechat", 50, 20, 1500);
			startmarquee("personTask", 50, 20, 1500);
			startmarquee("description", 50, 20, 1500);
		});

		</script>
</body>